<!DOCTYPE html>
<html>
    <head>

        <title><g:layoutTitle default="gERP" /></title>

        <%--MODIFIED DEFAULT JS LIBRARY--%>
        <g:javascript library="jquery" />
        
        <%--MAIN.CSS--%>
        <jqui:resources themeCss="${resource(dir:'css',file:'main.css')}"/>
        
        <%--JQUERY-THEME-ARISTO--%>
        <jqui:resources themeCss="${resource(dir:'themes/Aristo',file:'jquery-ui-1.8.7.custom.css')}"/>
        
        <%--JQUERY-JSON PLUGIN--%>
        <script src="${resource(dir:'js/jquery/plugins',file:'jquery.json-2.2.min.js')}" type="text/javascript" ></script>
        
        <%--JQUERY-LAYOUT PLUGIN--%>
        <script src="${resource(dir:'js/jquery/plugins',file:'jquery.layout.min-1.2.0.js')}" type="text/javascript" ></script>

        <%--CREATING LAYOUT USING JQUERY-LAYOUT PLUGIN--%>
		<script>

			//LAYOUT
		    $(document).ready(function () {
		        $('body').layout({ 
			        applyDefaultStyles: true,
			        north__applyDefaultStyles: false,
			        north__size: 50,
			        west__size: 220
			    });
		    });

			//BOTOES
	        $(function() {
		    	$(".botao").button();
	    	});

			//MENU BARRA LATERAL
	        $(function() {
	    		$( "#accordion" ).accordion( { autoHeight: false } );
	    	});

	    	//icones
	    	$(function(){
	    		$('.ui-state-default').hover(
	    			function(){ $(this).addClass('ui-state-hover'); }, 
	    			function(){ $(this).removeClass('ui-state-hover'); }
	    		);
	
	    		$('.ui-state-default').click(function(){
	    			$(this).toggleClass('ui-state-active');
	    		});
	
	    	});
		</script>        
        
        
        <g:layoutHead />
        
    </head>
    <body>
        
		<div class="ui-layout-center">
			<g:layoutBody />
		</div>
		
		<div class="ui-layout-north">
			<div class="userBar">
				<div class="inline right">rsvalerio</div><div class="inline right">logout</div><div class="inline right">help</div>
			</div>
		</div>
		
		<div class="ui-layout-west">
			
			<div id="accordion">
				<h3><a href="javascript:;">Localizador</a></h3>
				<div>
					<div class="searchPanel">
						<form action="/gerp/localizador">
							<input name="q" type="search" placeholder="Localizar" autocomplete="off">
						</form>
					</div>
				</div>
				<h3><a href="javascript:;">Recursos Humanos</a></h3>
				<div>
					Second content
					Second content
					Second content
					Second content
					Second content
				</div>
				<h3><a href="javascript:;">Produtos</a></h3>
				<div>
					Second content
					Second content
					Second content
					Second content
					Second content
					Second content
				</div>
				<h3><a href="javascript:;">Contratos</a></h3>
				<div>Second content</div>
				<h3><a href="javascript:;">CRM</a></h3>
				<div>Second content</div>
			</div>
			
		</div>
    </body>
</html>